<template>
  <div class="app-container home">
    <div class = "home-tip">
      <h3>关于供应商送货单迁移的通知</h3>
      <div class = "row-item">
        因业务调整原供应商送货单APEP系统近期将开始迁移，目前送货单已嵌入至现供应商使用结算、开票网页版中，后期供应商如下载送货单需在“订单管理”中进行打印。预计至4月底，老APEP系统将彻底停用。
      </div>
      <div class = "row-item">
        前期澳马公司已通知各供应商，如供应商还不了解情况。请尽快致电；澳马公司  周建忠 13701644505 
      </div>
    </div>

    <el-divider class="hr" />
    <div>
      <div class="title-text">
        <h3 style="font-weight: 600;display:flex">
          <el-image :src="image" style="width:25px;height:25px;"></el-image>
          <span style="display:block;margin-top:5px;margin-left:5px">公告与通知</span>
        </h3>
        <span class="right-text" @click="toMessage">更多>>></span>
      </div>

      <div>
        <ul>
          <hr class="xian" />
          <li v-for="(item, index) in  dataList.slice(0, 5)" :key="index">
            <div
              style="display:flex;justify-content:space-between;margin:0 25px;font-size:13px;position: relative;width:98%">
              <span class="img-div">
                <span class="img-text">{{ item.message }}

                </span>
                <img v-if="shouldShowImage(item.createTime)" src="@/assets/images/new.png" alt="" class="new-image">

              </span>
              <span style="margin-right:10px;width:30%;text-align: right;">{{ item.createTime }}</span>

            </div>
            <hr class="xian" />
          </li>
        </ul>
      </div>
    </div>

    <div v-if="this.dataList1.length > 0">
      <div class="title-text">
        <h3 style="font-weight: 600;display:flex"> <el-image :src="SXimage" style="width:25px;height:25px;"></el-image>
          <span style="display:block;margin-top:5px;margin-left:5px">私信</span>
        </h3>
        <span class="right-text" @click="toMessage1">更多>>></span>
      </div>

      <div>
        <ul>
          <hr class="xian" />
          <li v-for="(item, index) in  dataList1.slice(0, 5)" :key="index">
            <div
              style="display:flex;justify-content: space-between;margin:0 25px;font-size:13px; cursor: pointer;width:98%"
              :class="item.status === '0' ? 'ListColor' : ''" @click="sxClick(item)">
              <span class="img-div">
                <span class="img-text">{{ item.message }}
                </span>
                <img v-if="shouldShowImage(item.createTime)" src="@/assets/images/new.png" alt="" class="new-image">

              </span>
              <span style="margin-right:10px;width:30%;text-align: right;">{{ item.createTime }}</span>
            </div>
            <hr class="xian" />
          </li>
        </ul>
      </div>
    </div>

  </div>
</template>

<script>
import { messageList } from '@/api/login'
import { updateMessage } from '@/api/system/message'
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.7",
      dataList: [],
      dataList1: [],
      image: require("../assets/icon/ggts.png"),
      SXimage: require("../assets/icon/sx.png"),
      provide: "",
      deptName: "",
      messageReciver: "ALL",
      refreshInterval: null
    };
  },
  created() {
    const User = localStorage.getItem('User');
    this.deptName = JSON.parse(User).dept ? JSON.parse(User).dept.deptName : '';
    if (this.deptName !== '物资公司') {
      this.provide = this.deptName;
    } else {
      this.provide = "物资公司";
    }
    this.getList();
    this.getList1();
    // 设置定时器每 15 秒刷新一次 getList
    this.refreshInterval = setInterval(() => {
      this.getList();
      this.getList1();
    }, 15000); // 15秒刷新一次

    // 在组件销毁时清除定时器，避免内存泄漏
    this.$once('hook:beforeDestroy', () => {
      clearInterval(this.refreshInterval);
    });
  },

  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    getList() {
      messageList(this.messageReciver).then(rst => {
        if (rst.code === 200) {
          this.dataList = rst.rows
        }
      })
    },
    getList1() {
      messageList(this.provide).then(rst => {
        this.dataList1 = rst.rows
      })
    },
    shouldShowImage(createTime) {
      // 日期时间
      const hideImageDate = new Date(createTime);
      const a = hideImageDate.getTime(); // 获取时间戳

      // 当前时间
      const currentTime = new Date();
      const b = currentTime.getTime(); // 获取时间戳

      // 计算当前时间前三天的时间
      const threeDaysAgo = new Date();
      threeDaysAgo.setDate(threeDaysAgo.getDate() - 3);
      const c = threeDaysAgo.getTime(); // 获取时间戳
      // 判断 createTime 是否在当前时间前三天内
      return a >= c && a <= b;
    },
    formatDateTime(value) {
      const date = new Date(value);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');

      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    toMessage() {
      this.$router.push({
        name: 'messageList'
      });
    },
    toMessage1(){
      this.$router.push({
        name: 'messageList',query:{
          messageReciver:this.deptName
        }
      });
    },
    sxClick(item) {
      if (item.status === '0') {
        const form = {
          createBy: item.createBy,
          createTime: item.createTime,
          detailId: item.detailId,
          endTime: item.endTime,
          id: item.id,
          message: item.message,
          messageReciver: item.messageReciver,
          messageSender: item.messageSender,
          readTime: item.readTime,
          remark: item.remark,
          startTime: item.startTime,
          status: "1",
          updateBy: item.updateBy,
          updateTime: item.updateTime,
        }
        updateMessage(form).then(rst => {
          console.log(rst);
          if (rst.code === 200) {
            this.getList1();
          }
        })
      }

    }
  },

};
</script>

<style scoped lang="scss">
.home {
  .hr {
    margin-bottom: 5px;
  }

  .ListColor {
    color: red;
  }

  .title-text {
    display: flex;
    justify-content: space-between;
    height: 40px;
    padding-right: 20px;

    .right-text {
      line-height: 50px;

    }

    .right-text:hover {
      color: blue;
      cursor: pointer;

    }
  }


  .img-div {
    display: inline-block;
    display: flex;
    width: 80%;

    .img-text {

      display: inline-block;
      // width: 100%;
      white-space: nowrap;
      /* 文本不换行 */
      overflow: hidden;
      /* 超出部分隐藏 */
      text-overflow: ellipsis;
      /* 显示省略号 */
    }

    .new-image {
      width: 20px;
      height: 15px;
      margin-left: 10px;
      transform: translateY(-7px);
    }
  }


  .xian {
    margin-top: 15px;
    margin-bottom: 15px;
  }

  blockquote {

    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;

  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    // margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans",
  "Helvetica Neue",
  Helvetica,
  Arial,
  sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 600;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;


    }
  }
}

.home-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 20px;
  h3 {
    font-size: 32px;
  }
  .row-item {
    width: 100%;
    font-size: 22px;
    text-indent: 2em;
  }
}
</style>
